<template>
  <a-checkbox-group v-model:value="selectedOption" @change="onChange">
    <a-row v-if="colspan > 0">
      <a-col :span="colspan" v-for="(item, index) in effectItems" :key="item[valuePropName]">
        <a-checkbox :value="item[valuePropName]" 
                    :title="item[labelPropName]" 
                    :disabled="disableFilter(item)" 
                    @change="onCheck($event, item)" 
        >{{item[labelPropName]}}</a-checkbox>
      </a-col>
    </a-row>
    <span v-else >
      <a-checkbox v-for="(item, index) in effectItems" 
                  :value="item[valuePropName]" 
                  :key="item[valuePropName]" 
                  :title="item[labelPropName]" 
                  :disabled="disableFilter(item)" 
                  @change="onCheck($event, item)"
      >{{item[labelPropName]}}</a-checkbox>
    </span>
  </a-checkbox-group>
</template>
<script>

/**
 * 进一步封装Antdv的Checkbox组件，简化代码量
 */
export default {
  name: 'SagCheckbox',
  inject: ['getDictByType'],
  props: {
    datasource: { type: [Array, String, Function], default: null },
    labelPropName: { type: [String, Number], default: 'label' },
    valuePropName: { type: [String, Number], default: 'value' },
    value: { type: Array, default: ()=>[] },
    includeDisabled: { type: Boolean, default: false },
    numberValue: { type: Boolean, default: false },
    disableFilter: { type: Function, default: (_item) => false },
    colspan: { type: Number, default: 0, validator:function(c){
        return c >= 0 && c <=24;
      }
    }
  },
  emits: ['update:value', 'change', 'check'],
  data() {
    return {
      items: [],
      selectedOption: this.value,
    };
  },
  computed: {
    effectItems() {
      const { valuePropName, items } = this;
      if(this.numberValue){
        items.forEach(item => item[valuePropName] = Number(item[valuePropName]))
      }
      return items;
    },
  },
  watch: {
    datasource: {
      immediate: true,
      handler(val, old) {

        if (Array.isArray(val)) {
          this.items.splice(0, this.items.length, ...val);
        } else if (typeof val === 'string' && val.length > 0) {
          this.items.splice(0, this.items.length);
          this.loadDictData();
        } else if (val instanceof Function) {
          this.items.splice(0, this.items.length);
          val()
              .then(resp => {
                if (resp.success && resp.data && resp.data.length > 0) {
                  this.items.push(...resp.data);
                }
              })
              .catch(() => {
                console.warn('没有获得数据源数据:' , val);
              });
        }
      },
    },
    value: {
      immediate: true,
      handler(val) {
        this.selectedOption = val;
      },
    }
  },
  methods: {
    loadDictData() {
      // 加载数据字典数据
      this.getDictByType(this.datasource, this.includeDisabled ? 1 : 0).then(resp => {
        if (resp && resp.success && resp.data && resp.data.length > 0) {
          const options = resp.data.map(x => ({
            [this.labelPropName]: x[1],
            [this.valuePropName]: x[0],
          }));
          this.items.push(...options);
          this.$nextTick(() => {
            this.selectedOption = this.value;
          });
        } else {
          console.warn('没有获取到数据源数据:' + this.datasource);
        }
      });
    },
    onChange(val){
      this.$emit('update:value', val);
      this.$emit('change', val);
    },
    onCheck(e, item){
      this.$emit('check', item, e.target.checked);
    }
  },
};
</script>
